<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-loading="isLoading" class="tree-card">
        <!-- 根级别的公司tree-tools，只显示一个按钮：添加子部门 -->
        <!-- 头部集团 -->
        <tree-tools
          :node-data="company"
          :is-root="true"
          @add-depts="handleAdd"
        />

        <!-- 树形控件 - 内容希望定制 => 通过插槽 => 插槽渲染后叠在了一起，
             是element-ui树形节点样式的问题，需要手动给el-row设置width: 100%;
        -->
        <!-- ---------------------------------------------------------------- -->
        <!-- 下面的主体 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="false"
        >
          <template #default="{ data }">
            <!-- 普通的tree-tools按钮都展示 -->
            <tree-tools
              :node-data="data"
              @add-depts="handleAdd"
              @del-depts="getDepartments"
              @edit-depts="showEdit"
            />
          </template>
        </el-tree>
      </el-card>

      <!-- 添加部门 -->
      <!-- <add-dept :show-dialog="showDialog" @close-dialog="showDialog = $event" /> -->
      <add-dept
        ref="addRef"
        :show-dialog.sync="showDialog"
        :depts-list="deptsList"
        :node-data="nodeData"
        @add-depts="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { reqGetDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {},
      // label 节点标签的文字 children 子节点
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [
            {
              name: '董事会',
              manager: '曹丕',
              children: [
                { name: '秘书部', manager: '张大强' }
              ]
            }
          ]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      deptsList: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      showDialog: false,
      nodeData: {},
      isLoading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      this.isLoading = true // 准备要请求了，让他加载起来
      const { data } = await reqGetDepartments()

      this.company = {
        name: data.companyName,
        manager: '负责人',
        id: ''
      }
      this.deptsList = data.depts // 后台直接返回的，扁平化的数据，一层的列表式的数据

      // 第一次调用，一定是传入找第一层的条件
      const results = tranListToTreeData(data.depts, '')
      this.departs = results // 处理过的，树形结构的数据，多层的树形的数据 （遍历树形的数据，肯定要继续递归）

      setTimeout(() => {
        this.isLoading = false
      }, 500)
    },
    handleAdd(nodeData) {
      this.nodeData = nodeData
      this.showDialog = true // 让子组件显示
      // 找到子组件，调用子组件的方法，进而实时获取数据
      this.$refs.addRef.getEmployeeSimple()
    },

    showEdit(nodeData) {
      this.nodeData = nodeData
      this.showDialog = true
      this.$refs.addRef.getEmployeeSimple() // 获取下拉菜单的列表数据
      this.$refs.addRef.getDepartDetail(this.nodeData.id) // 传入正在被编辑的id，获取数据进行回显
    }
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}

.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
